import React from 'react';
import ProForm, {
  ProFormText,
  DrawerForm,
} from '@ant-design/pro-form';
import { useIntl, FormattedMessage } from 'umi';

// 定义value的类型，
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.HostsInfoListItem>;

export type AddDrawerFormProps = {
  // onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  // 抽屉组件props里只有onClose 没有onCancle
  onClose: () => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  onVisibleChange: (visible: boolean) => void;
  addHostDrawerVisible: boolean;
};

const AddHostDrawerForm: React.FC<AddDrawerFormProps> = (props) => {
  const intl = useIntl();
  return (
    <>
      <DrawerForm
        title={intl.formatMessage({
          id: 'pages.listHostsInfoTable.addHostForm.newHost',
          defaultMessage: 'New Host',
        })}

        // 此ModalForm是否显示，由父组件中 addHostModalVisible 管理
        // 当visible状态改变时候，由onVisibleChange来处理下一步动作，传给父组件
        visible={props.addHostDrawerVisible}
        onVisibleChange={props.onVisibleChange}
        onFinish={props.onSubmit}
        drawerProps={{
          forceRender: true,
          destroyOnClose: true,
          onClose: () => {
            props.onClose();
          },
        }}
        width="300px"
      >
        <ProForm.Group>
          <ProFormText
            width="md"
            name="hostname"
            label={
              <FormattedMessage
                id="pages.listHostsInfoTable.hostname"
                defaultMessage="Host"
              />
            }
            placeholder="请输入主机名"
          />

          <ProFormText
            width="md"
            name="ip"
            label={
              <FormattedMessage
                id="pages.listHostsInfoTable.ip"
                defaultMessage="IP"
              />
            }
            placeholder="请输入IP地址"
          />
        </ProForm.Group>

        <ProForm.Group>
          <ProFormText
            width="md"
            name="username"
            label={
              <FormattedMessage
                id="pages.listHostsInfoTable.username"
                defaultMessage="Username"
              />
            }
            placeholder="请输入用户名"
          />

          <ProFormText
            width="md"
            name="password"
            label={
              <FormattedMessage
                id="pages.listHostsInfoTable.password"
                defaultMessage="Password"
              />
            }
            placeholder="请输入密码"
          />
        </ProForm.Group>

        <ProForm.Group>
          <ProFormText
            width="md"
            name="os"
            label={
              <FormattedMessage
                id="pages.listHostsInfoTable.os"
                defaultMessage="OS"
              />
            }
            placeholder="请输入操作系统类型"
          />

          <ProFormText
            width="md"
            name="arch"
            label={
              <FormattedMessage
                id="pages.listHostsInfoTable.arch"
                defaultMessage="Arch"
              />
            }
            placeholder="请输入主机架构类型"
          />
        </ProForm.Group>

        <ProForm.Group>
          <ProFormText
            width="md"
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="pages.searchTable.ruleName"
                    defaultMessage="Rule name is required"
                  />
                ),
              },
            ]}
            name="port"
            label={
              <FormattedMessage
                id="pages.listHostsInfoTable.port"
                defaultMessage="PORT"
              />
            }
            placeholder="请输入端口号"
          />
        </ProForm.Group>
      </DrawerForm>
    </>
  );
};

export default AddHostDrawerForm